@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2*1px;
}
$blue:#241f47;
$yellow: #fade5d;
@mixin transf{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.goodsListM{
    height: 100%;
    background: url(../img/bg.jpg);
}
.main{
    padding-top: p(16);
    .top{
        width: 97%;
        height: p(50);
        background: #5fa1df;
        border-radius: p(3);
        margin: 0 auto;
        font-size: p(22);
        color: #fff;
        text-align: center;
        line-height: p(50);
    }
    ul{
        display: flex;
        width: 97%;
        margin: p(9) auto;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        li:first-child{
            width: p(306);
            height: p(353);
            .note{
                width: p(229);
                height: p(61);
                background: url(../img/goodsList.png) no-repeat;
                background-size: 100% ;
                font-size: p(36);
                color: #fff;
                line-height: p(61);
                span{
                    margin-left: p(21);
                }
            }
        }
        li:nth-of-type(2){
            width: p(306);
            height: p(353);
        }
        li{
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            width: p(306);
            height: p(294);
            border: 1px solid #cdccd0;
            background: #fff;
            margin-bottom: p(9);
            .img{
                width: p(239);
                height: p(175);
                overflow: hidden;
                position: relative;
                margin: 0 auto;
                img{
                    width: 100%;
                    @include transf ;
                }
            }
            .desc{
                font-size: p(19);
                color: #5c5c5c;
                margin: 0 p(9);
                .tip{
                    margin-right: p(20);
                }
                a{
                    color: #5c5c5c;
                }
            }
            .price{
                width: 100%;
                font-size: p(25);
                color: #eb7575;
                display: flex;
                justify-content: flex-end;
                margin-right: p(9);
            }
        }
    }
}
